<template>
  <div>
    <div style="padding: 20px">
      <el-button type="primary" @click="upsubmit">提交</el-button>
    </div>
    <div class="nav">
      <el-form ref="form" :model="form" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="18">
            <el-form-item label="标题">
              <el-input v-model="form.title" placeholder="标题"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="选择类型">
              <el-select
                v-model="form.idChannel"
                placeholder="类型"
                v-if="changelistview"
              >
                <el-option
                  v-for="i in changelistview"
                  :key="i.id"
                  :label="i.name"
                  :value="i.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div style="background:#fff;">
      <div ref="watchcontent" class="watchcontent"></div>
    </div>
  </div>
</template>

<script>
import wangeditor from "wangeditor";
import { http, changelist, file,article } from "../../api/api";
export default {
  data() {
    return {
      form: {
        idChannel: "",
        title: "",
      },
      changelistview: "",
      editor: "",
    };
  },
  mounted() {
    console.log(this.$refs.watchcontent);
    this.editor = new wangeditor(this.$refs.watchcontent);

    // 隐藏图片
    this.editor.customConfig.showLinkImg = false;
    // 上传图片到服务器
    this.editor.customConfig.uploadImgServer = "/upload";
    // 每次只能上传一张图片
    this.editor.customConfig.uploadImgMaxLength = 1;
    // 自定义上传图片事件
    this.editor.customConfig.customUploadImg = (files, insert) => {
      // files 是 input 中选中的文件列表
      // insert 是获取图片 url 后，插入到编辑器的方法
      console.log(files);
      let f = files[0];
      let d = new FormData();
      d.append("file", f);
      // 发送请求给服务器
      this.$http
        .post(http + file, d, {
          headers: {
            "constnet-type": "multipart/form-data",
            "Authorization": localStorage.token,
          },
        })
        .then(
          (data) => {
            if (data.data.msg == "成功") {
                 var dataimg = data.data.data.realFileName;
          dataimg = dataimg.replace(/\/local\/program\/nginx\/conf/g,"http://39.101.217.150");
                /*  /local/program/nginx/conf/static/flash3c40b8e3-cba0-4e89-bacd-0429f40e39e1.jpg */
             
              insert(dataimg);
            } else {
              this.$message.error(data.data.msg);
            }
          },
          (err) => {
            this.$message.error(err.data.message);
          }
        );
      // 上传代码返回结果之后，将图片插入到编辑器中
    };
    this.editor.create();

    this.getchangellist();
  },
  methods: {
    upsubmit() {
      var json = {
        author: this.$store.state.user.info.profile.name,
        content: this.editor.txt.html().replace(/\%/g, "%25"),
        idChannel: this.form.idChannel,
        title: this.form.title,
      };
      console.log(json);
      var type= true;
       for(var i in json){
           if(json[i]==""){
              type = false
           }else{
             type = true;
           }
       }
      if(type){
            this.$http.post(http + article,JSON.stringify(json)).then(
        (data) => {
          if (data.data.msg == "成功") {
                console.log(data.data);
                this.$message.success("恭喜,提交数据成功");
          } else {
            this.$message.error(data.data.msg);
          }
        },
        (err) => {
          this.$message.error(err.data.message);
        }
      );   
      }else{
          this.$message.error("请补全数据");
      }

    },
    getchangellist() {
      // 开启动画
      const loading = this.$loading({
          lock: true,
          text: 'Loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
      this.$http.get(http + changelist).then(
        (data) => {
          console.log(data.data);
          if (data.data.msg == "成功") {
            this.changelistview = data.data.data;
            // 关闭动画
            setTimeout(()=>{
                  loading.close();
            },1000)
          } else {
            this.$message.error(data.data.msg);
          }
        },
        (err) => {
          this.$message.error(err.data.message);
        }
      );
    },
  },
};
</script>

<style>
.watchcontent {
  position: relative;
  z-index: 1;
}
.nav {
  z-index: 2;
}
</style>